<template>
	<view class="wrapForm">
		<view class="bgLine"></view>
		<view class="wrapFormBody pL15 pR15 pT15 myInfoForm">
			<u-form :label-width="160" :label-style="{'font-size':'30rpx'}" class="xf-wrap-form" ref="dataForm"
				:rules="rules" :model="formData" :error-type="['toast']">
				<u-form-item label="头像" prop="">
					<view class="w100 flex jst-end">
						<button class="myInfoHeadBtn flex jst-end alg-center" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<block v-if="formData.headSculpturePath">
								<image :src="xf.getImgUrl(formData.headSculpturePath)"></image>
							</block>
							<block v-else>
								<view class="uploadHeadBtn flex jst-center alg-center">
									<u-icon name="camera" size="58" color="#999"></u-icon>
								</view>
							</block>
						</button>
					</view>
				</u-form-item>
				<u-form-item label="昵称" prop="nickname">
					<u-input :input-align="'right'" type="nickname" placeholder="请输入昵称最多8个字符"
						v-model="formData.nickname" />
				</u-form-item>
				<u-form-item label="实名认证" prop="">
					<view class="w100 flex jst-end font14">
						<view>已认证</view>
						<u-icon name="arrow-right" :color="'#C0C4CC'"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="地址" prop="address" :required="true">
					<view class="w100 flex alg-center jst-between">
						<view style="width: calc(100% - 46rpx);">
							<u-input input-align="right" :showIcon="false" type="select" placeholder="请选择地址"
								v-model="formData.address" />
						</view>
						<image @click="chooseLocation" class="imgW36" :src="resources.posIcon" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="详细地址" prop="homeAddress" :required="true">
					<view class="w100 ">
						<u-input input-align="right" placeholder="请输入详细地址" v-model="formData.homeAddress" />
					</view>
				</u-form-item>
				<u-form-item label="所属驿站" prop="organizationName" :required="true">
					<view class="w100">
						<u-input type="select" v-model="formData.organizationName" placeholder="请选择所属驿站"
							input-align="right" @click="showPicker"></u-input>

					</view>
				</u-form-item>
			</u-form>
		</view>
		<jobType ref="jobType" @getSelV="getSelV" :isMultie="true" :title="'请选择期望职位'"
			:defaultValue="formData.expectedPosition" :showLength="true" :checkLength="3"></jobType>
		<xfTreePicker :defalutValue="formData.organizationId" :selectParent="false" ref="treePicker" :multiple="false"
			@select-change="selectChange" title="所属驿站" :localdata="deptLis" valueKey="id" textKey="name"
			codeKey="orgCode" childrenKey="children"></xfTreePicker>

		<view class="flex jst-center bottomW">
			<view class="pointer rightNowPay u-f font15 t-center" @click="saveMyInfo">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		editUserInfo
	} from "@/api/userInterface/user.js"
	import jobType from "@/components/job/jobType/index.vue"
	import {
		chooseLocal
	} from "@/libs/map.js"
	import {
		getOrgTree
	} from "@/api/common.js"
	import selAreaMinxs from "@/utils/selArea.js"

	export default {
		mixins: [selAreaMinxs],
		components: {
			jobType
		},
		data() {
			return {
				formData: {
					headSculpturePath: '',
					nickname: '',
					workType: '',
					workTypeText: '',
					sex: '',
					sexText: '',
					expectedPosition: '',
					expectedPositionText: '',
					introduce: "",
					authenticationState: '',
					authenticationStateText: '',
					homeAddress: "",
					"provinceId": "",
					"provinceName": "",
					"cityId": "",
					"cityName": "",
					"areaId": "",
					"areaName": "",
					"organizationId": "",
					organizationName: "",
					longitude: "",
					latitude: "",
					address: ""
				},
				selData: [],
				deptLis: [],
				genderLis: [],
				workTypeLis: [],
				hopeWorkLis: [],
				rules: {
					nickname: [{
						required: true,
						message: '请输入昵称',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请选择地址',
						trigger: ['change', 'blur'],
					}],
					homeAddress: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur'],
					}],
					organizationName: [{
						required: true,
						message: '请选择所属服务站点',
						trigger: ['change', 'blur'],
					}],
					expectedPositionText: [{
						required: true,
						message: '请选择期望职位',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.dataForm.setRules(this.rules);
			this.getTreeOpt()
		},
		async onShow() {
			await this.getDic()

		},
		onLoad() {
			this.getUserInfoOpt()
		},
		methods: {
			async onChooseAvatar(e) {
				let that=this;
				let url=await this.baseStore.getUploadUrlApi()
				let tempFilePath=e.detail.avatarUrl;
				console.log(tempFilePath)
				uni.uploadFile({
					url:url,
					filePath:tempFilePath,
					name:'file',
					header:{
						"X-Access-Token":uni.getStorageSync('token')
					},
					success(res) {
					
						let result=res.data&&JSON.parse(res.data)
						if(result.success){
							that.formData.headSculpturePath=result.message
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
					
			showPicker() {

				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, code, names) {
				this.formData.organizationName = names;
				this.formData.organizationId = ids;
				this.selData = [ids]
			},
			async chooseLocation() {
				let res = await chooseLocal();
				let r = res.address + res.name;
				let d = this.regionDiscern(r)
				this.formData.provinceId = d.data.province.code;
				this.formData.cityId = d.data.city.code;
				this.formData.areaId = d.data.area.code;
				this.formData.provinceName = d.data.province.name;
				this.formData.cityName = d.data.city.name;
				this.formData.areaName = d.data.area.name;
				this.formData.address = this.formData.provinceName + this.formData.cityName + this.formData.areaName
				this.formData.latitude = res.latitude;
				this.formData.longitude = res.longitude;
				this.formData.homeAddress = d.data.address;
				console.log(this.formData)
			},
			getGender(e, v) {
				this.formData.sexText = v && v?.text && v?.text
			},
			getWorkType(e, v) {
				this.formData.workTypeText = v && v?.text && v?.text
			},
			//打开全部职位选择框
			openJobType() {
				this.$refs.jobType.openPoup()
			},
			getSelV(e, v) {
				this.formData.expectedPosition = e;
				this.formData.expectedPositionText = v;
				console.log(this.formData)
			},
			saveMyInfo() {
				this.$refs.dataForm.validate(async valid => {
					if (valid) {
						let data = this.xf.deepClone(this.formData);
						delete data.address;
						let res = await editUserInfo(data)
						if (res.success) {
							this.xf.onlineUtils.toast("保存成功！", 2000)
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/economicPage/home/index"
								})
							}, 2000)
						}
					} else {
						console.log('验证失败');
					}
				});


			},
			getDic() {
				this.baseStore.getDictionaryDataAll('sex').then(res => {
					this.genderLis = res
					console.log(this.genderLis)
				})
				this.baseStore.getDictionaryDataAll('jjp_oddjob_work_type').then(res => {
					this.workTypeLis = res
				})
				this.baseStore.getDictionaryDataAll('jjp_oddjob_JobType').then(res => {
					this.hopeWorkLis = res
					// console.log(this.hopeWorkLis)
				})
			},
			getTreeOpt() {
				getOrgTree().then(res => {
					this.deptLis = res.result[0].children;
				})
			},
			getUserInfoOpt() {
				getUserInfo().then(res => {
					this.formData = {
						headSculpturePath: res.result.headSculpturePath,
						nickname: res.result?.nickname||res.result?.xflinggongOddUserInfoVo?.realName,
						workType: res.result?.workType,
						expectedPositionText: res.result?.expectedPositionText,
						expectedPosition: res.result?.expectedPosition,
						introduce: res.result?.introduce,
						authenticationState: res.result?.authenticationState,
						homeAddress: res.result?.homeAddress,
						address: '',
						"provinceId": res.result?.provinceId,
						"provinceName": res.result?.provinceName,
						"cityId": res.result?.cityId,
						"cityName": res.result?.cityName,
						"areaId": res.result?.areaId,
						"areaName": res.result?.areaName,
						"organizationId": res.result?.organizationId,
						organizationName: res.result?.organizationName,
						longitude: res.result?.longitude,
						latitude: res.result?.latitude,
					}
					this.formData.address = this.formData.provinceName + this.formData.cityName + this.formData
						.areaName
				})
			},
		}
	}
</script>
<style lang="scss">
	page {

		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.wrapForm {

		height: 100%;

		.wrapFormBody {
			margin-top: -30rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
			padding-bottom: 240rpx;
		}

		.uni-forms-item {
			align-items: center !important;
		}

		.uni-input-placeholder {
			text-align: right !important;
			color: #BDBDBD;
		}
	}

	.bgLine {
		background-color: #EBFCFF;
		width: 100%;
		height: 60rpx;
	}

	.bottomW {
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		left: 0;
	}

	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #00A0C6;
		border-radius: 30rpx;

	}
</style>